
<%--
  Created by IntelliJ IDEA.
  User: liuqing
  Date: 2024/10/29
  Time: 22:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>小说系统登录</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/jquery-3.7.1.min.js"></script>
    <style>
        .wrapper .form-wrapper.sign-in {
            transform: scale(1) translate(0, 0); /* 登录表单默认可见 */
            opacity: 1;
        }
    </style>
</head>
<%--如果user不为空，设置好账号和密码--%>
<body>
<div class="wrapper">
    <!-- 表示这个元素同时属于 form-wrapper 和 sign-in 这两个类。 -->
    <div class="form-wrapper sign-in">
        <form action="#" method="post" id="myForm">
            <h2>后端管理员登录</h2>
            <div class="input-group">
                <!-- <input type="text" placeholder="用户名" id="username"> -->
                <!-- required：这个属性是一个布尔属性，表示该输入框是必填项 -->
                <input type="text" id="username" name="username" required>
                <label for="username">用户名</label>
                <span id="errname"></span>
            </div>
            <div class="input-group">
                <input type="password" id="password" name="password" required>
                <label for="password">密码</label>
                <span id="errpassword"></span>
            </div>
            <div class="input-group">
                <input type="text" id="verification" name="verification" required>
                <label for="verification">验证码</label>
                <button id="sendCode">发送验证码</button>
                <span id="errVerification"></span>
            </div>
            <button type="submit" id="loginButton">登 录</button>
        </form>
    </div>
</div>
<%--<%--%>
<%--    String msg =(String) request.getAttribute("msg");--%>
<%--    if (msg!=null){--%>
<%--        request.removeAttribute("msg"); // 从请求属性中移除消息--%>
<%--%>--%>
<%--<script type="text/javascript">--%>
<%--    window.onload = function() {--%>
<%--        alert("<%=msg%>");--%>
<%--    };--%>
<%--</script>--%>
<%--<%--%>
<%--    }--%>
<%--%>--%>

<script>
    $(document).ready(function() {
        $('#myForm').on('submit', function(e) {
            e.preventDefault(); // 阻止表单默认提交行为

            $.ajax({
                type: "POST",
                url: "LoginAdminServlet", // Servlet的URL
                data: $(this).serialize(), // 将表单数据序列化
                success: function(response) {
                    if(response==="codeError"){
                        $('#errVerification').text("验证码错误");
                    }else if (response==="usernameError"){
                        $('#errname').text("用户名错误");
                    }else if (response==="passwordError"){
                        $('#errpassword').text("密码错误");
                    }else{
                        alert(response);
                    }
                },
                error: function(xhr, status, error) {
                    alert(error);
                }
            });
        });
    });

    $(document).ready(function() {
        var countdown = 60; // 倒计时时间
        var timer; // 用于存储定时器的变量

        $('#sendCode').click(function() {
            // 清除之前的定时器
            clearInterval(timer);

            // 发送AJAX请求到服务器
            $.ajax({
                type: "POST",
                url: "GenerateCodeServlet", // Servlet的URL
                success: function(response) {
                    // 显示服务器返回的消息
                    // $('#errVerification').text(response.message);
                    console.log(response.message);
                    // 开始倒计时
                    timer = setInterval(function() {
                        countdown--;
                        $('#sendCode').attr('disabled', true); // 禁用按钮
                        $('#sendCode').text(countdown + '秒后重新获取');
                        if (countdown === 0) {
                            clearInterval(timer);
                            $('#sendCode').text('重新发送').removeAttr('disabled'); // 重置按钮
                            countdown = 60; // 重置倒计时时间
                        }
                    }, 1000);
                },
                error: function(xhr, status, error) {
                    $('#errVerification').text("Error occurred");
                }
            });
        });
    });
</script>
</body>
</html>
